<template>
	<div class="contain">
		<el-tabs type="border-card">
			<el-tab-pane label="筛选">
				<div style="padding: 20px;">
					<div>
						<span style="float: left;">
							地区：
						</span>

						<el-radio-group v-model="filter.zone" size="mini" style="margin-bottom: 10px; float: left;">
							<el-radio-button label="0">不限</el-radio-button>
							<el-radio-button label="1">鼓楼区</el-radio-button>
							<el-radio-button label="2">台江区</el-radio-button>
							<el-radio-button label="3">仓山区</el-radio-button>
							<el-radio-button label="4">马尾区</el-radio-button>
							<el-radio-button label="5">晋安区</el-radio-button>
						</el-radio-group>
					</div>
					</br>
					<div style="clear: both;">
						<span style="float: left;">
							售价：
						</span>
						<el-radio-group v-model="filter.price" size="mini" style="margin-bottom: 10px;float: left;">
							<el-radio-button label="0">不限</el-radio-button>
							<el-radio-button label="L120">120万以下</el-radio-button>
							<el-radio-button label="G120L200">120-200万</el-radio-button>
							<el-radio-button label="G200L350">200-350万</el-radio-button>
							<el-radio-button label="G350">350万以上</el-radio-button>
						</el-radio-group>
						<div style="float: left;margin-left: 40px;">
							<el-input v-model="filterPriceMin" size="mini" style="width: 50px;"></el-input>
							<span style="padding: 0 5px;">-</span>
							<el-input size="mini" v-model="filterPriceMax" style="width: 50px;"></el-input>
							<span style="padding: 0 5px;">万</span>
							<el-button icon="el-icon-check" circle size="mini" @click="checkFilterPrice"
								v-show="filterPriceMin >= 0 && parseInt(filterPriceMax) > parseInt(filterPriceMin)">
							</el-button>
						</div>
					</div>
					<div style="clear: both;">
						<span style="float: left;">
							面积：
						</span>
						<el-radio-group v-model="filter.area" size="mini" style="margin-bottom: 10px;float: left;">
							<el-radio-button label="0">不限</el-radio-button>
							<el-radio-button label="L50">50㎡以下</el-radio-button>
							<el-radio-button label="G50L80">50-80㎡</el-radio-button>
							<el-radio-button label="G80L120">80-120㎡</el-radio-button>
							<el-radio-button label="G120">120㎡以上</el-radio-button>
						</el-radio-group>
						<div style="float: left;margin-left: 40px;">
							<el-input v-model="filterAreaMin" size="mini" style="width: 50px;"></el-input>
							<span style="padding: 0 5px;">-</span>
							<el-input size="mini" v-model="filterAreaMax" style="width: 50px;"></el-input>
							<span style="padding: 0 5px;">㎡</span>
							<el-button icon="el-icon-check" circle size="mini" @click="checkFilterArea"
								v-show="filterAreaMin >= 0 && parseInt(filterAreaMax) > parseInt(filterAreaMin)">
							</el-button>
						</div>
					</div>

				</div>
			</el-tab-pane>
		</el-tabs>
		<div class="all-house-count">
			<p>找到<span>{{dataTotal}}</span>套符合要求的房源</p>
		</div>

		<div class="all-house">
			<ul>
				<li v-for="(item,i) in houseList">
					<House ButtonType="查看详细" :house="item" class="house-box"></House>
				</li>

			</ul>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="dataTotal" v-show="dataTotal>0">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import House from './components/house.vue'
	import {
		getHouseByPage,
		getHouseByPageAsFilter,
		searchHouseByVillage
	} from '@/api/house'
	export default {
		components: {
			House
		},
		data() {
			return {
				// 分页
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 15, 20, 100],
				dataTotal: 0,
				filter: {
					zone: '0',
					price: '0',
					area: '0'
				},
				filterPriceMin: 0,
				filterPriceMax: 0,
				filterAreaMin: 0,
				filterAreaMax: 0,
				houseList: [],
			}
		},
		created() {
			if(!this.$route.params.village){
				this.getHouseList()
			}else{
				this.searchHouseByVillage(this.$route.params.village)
			}
		},
		watch: {
			filterPriceMin(newVal, oldVal) {
				const numReg = /^[0-9]*$/
				const numRe = new RegExp(numReg)
				if (!numRe.test(newVal)) {
					this.filterPriceMin = ''
				}
			},
			filterPriceMax(newVal, oldVal) {
				const numReg = /^[0-9]*$/
				const numRe = new RegExp(numReg)
				if (!numRe.test(newVal)) {
					this.filterPriceMax = ''
				}
			},
			filterAreaMin(newVal, oldVal) {
				const numReg = /^[0-9]*$/
				const numRe = new RegExp(numReg)
				if (!numRe.test(newVal)) {
					this.filterAreaMin = ''
				}
			},
			filterAreaMax(newVal, oldVal) {
				const numReg = /^[0-9]*$/
				const numRe = new RegExp(numReg)
				if (!numRe.test(newVal)) {
					this.filterAreaMax = ''
				}
			},
			filter: {
				handler(newValue, oldValue) {
					this.getHouseList()
				},
				deep: true
			}
		},
		methods: {
			// 获取数据
			getHouseList() {
				if (this.filter.zone === '0' && this.filter.price === '0' && this.filter.area === '0') {
					getHouseByPage(this.currentPage, this.pageSize).then(res => {
						if (res.code === 1) {
							const {
								data
							} = res
							this.dataTotal = data.total
							this.houseList = data.data

						}
					})
				} else {
					this.currentPage = 1
					this.pageSize = 10
					getHouseByPageAsFilter(this.currentPage, this.pageSize, this.filter.zone, this.filter.price, this
						.filter.area).then(res => {
						if (res.code === 1) {
							const {
								data
							} = res
							this.dataTotal = data.total
							this.houseList = data.data

						} else {
							this.houseList = []
							this.dataTotal = 0
						}
					})
				}
			},
			searchHouseByVillage(village){
				searchHouseByVillage(village).then(res =>{
					if(res.code === 1){
						this.houseList = res.data
						this.dataTotal = this.houseList.length
					}
				})
			},
			// 分页功能
			handleSizeChange(val) {
				this.pageSize = val
				this.getHouseList()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getHouseList()
			},
			// 筛选
			checkFilterPrice() {
				this.filter.price = 'G' + this.filterPriceMin + 'L' + this.filterPriceMax
				console.log(this.filter.price)
			},
			checkFilterArea() {
				this.filter.area = 'G' + this.filterAreaMin + 'L' + this.filterAreaMax
			},
		}
	}
</script>

<style scoped>
	.all-house {
		/* height: 1000px; */
	}

	.all-house-count p {
		font-weight: bold;
		font-size: 18px;
		height: 60px;
	}

	.all-house-count p span {
		color: red;
		margin: 0 5px;
	}

	.all-house-count {
		text-align: left;
	}

	.contain {
		background: #f3f5f8;
		width: 1130px;
		margin: 0 auto;
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
</style>
